<template>

    <form>
        <div>
            <label>电影名称：</label>
            <input type="text" v-model.lazy="addItem.name">
        </div>
        <div class="form-item">
            <label>电影类型：</label>
            <div v-for="item in typeData" :key="item._id">
                <input type="checkbox" v-model="addItem.types" :value="item.name">
                <label>{{ item.name }}</label>
            </div>
        </div>
        <div>
            <label for="">制片国家：</label>
            <select v-model="addItem.country">
                <option :value="item.name" v-for="item in countryData" :key="item._id">
                    {{ item.name }}
                </option>
            </select>
        </div>
        <div>
            <label>电影时长：</label>
            <input type="text" v-model.lazy="addItem.duration">
        </div>
        <div>
            <label>上映时间：</label>
            <input type="text" v-model.lazy="addItem.year">
        </div>
        <div>
            <label>是否热映：</label>
            <input type="radio" v-model="addItem.hot" :value="1"><label>是</label>
            <input type="radio" v-model="addItem.hot" :value="0"><label>否</label>
        </div>
        <div>
            <button @click.prevent="onAddMovie">确认新增</button>
        </div>
    </form>
    <form>
        <div>
            <label>电影名称：</label>
            <input type="text" v-model.lazy="updateItem.name">
        </div>
        <div class="form-item">
            <label>电影类型：</label>
            <div v-for="item in typeData" :key="item._id">
                <input type="checkbox" v-model="updateItem.types" :value="item.name">
                <label>{{ item.name }}</label>
            </div>
        </div>
        <div>
            <label for="">制片国家：</label>
            <select v-model="updateItem.country">
                <option :value="item.name" v-for="item in countryData" :key="item._id">
                    {{ item.name }}
                </option>
            </select>
        </div>
        <div>
            <label>电影时长：</label>
            <input type="text" v-model.lazy="updateItem.duration">
        </div>
        <div>
            <label>上映时间：</label>
            <input type="text" v-model.lazy="updateItem.year">
        </div>
        <div>
            <label>是否热映：</label>
            <input type="radio" v-model="updateItem.hot" :value="1"><label>是</label>
            <input type="radio" v-model="updateItem.hot" :value="0"><label>否</label>
        </div>
        <div>
            <button @click.prevent="onUpdateMovie">确认修改</button>
        </div>
    </form>
    <h4>{{ searchItem }}</h4>
    <!-- 搜索 -->
    <div>
        <input type="text" v-model.lazy.trim="searchItem.name">
        <select v-model="searchItem.country">
            <option :value="item.name" v-for="item in countryData" :key="item._id">
                {{ item.name }}
            </option>
        </select>
        <select v-model="searchItem.type">
            <option :value="item.name" v-for="item in typeData" :key="item._id">
                {{ item.name }}
            </option>
        </select>
    </div>
    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>类型</th>
                <th>制片国家</th>
                <th>上映年份</th>
                <th>时长</th>
                <th>是否热映</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in filterData" :key="item._id">
                <td>{{ item._id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.types.join(' / ') }}</td>
                <td>{{ item.country }}</td>
                <td>{{ item.year }}</td>
                <td>{{ item.duration }}</td>
                <!-- <td>{{ item.hot ? '是' : '否' }}</td> -->
                <td>
                    <span v-if="item.hot">是</span>
                    <span v-else>否</span>
                </td>
                <td>
                    <!-- <button @click="updateItem = item">修改</button> -->
                    <button @click="updateItem = { ...item }">
                        修改
                        <!-- {{ item.types == updateItem.types }} -->
                    </button>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
const movieData = ref([
    {
        "_id": "682d9da7573f2ec0eb01fb5b",
        "name": "攻壳机动队",
        "duration": "83",
        "hot": 1,
        "types": [
            "动作",
            "科幻",
            "动画"
        ],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682da14ba9d2e7026f9c3016",
        "name": "幽灵公主",
        "score": "8.9",
        "duration": "134",
        "hot": 0,
        "types": [
            "动画",
            "奇幻",
            "冒险"
        ],
        "country": "日本",
        "year": "1997",
    },
    {
        "_id": "682da1d6a9d2e7026f9c301e",
        "name": "情书",
        "score": "8.9",
        "duration": "117",
        "hot": 1,
        "types": ["爱情"],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682ef55afa09000092007cbe",
        "name": "诡才之道",
        "duration": "112",
        "hot": 1,
        "types": [
            "喜剧",
            "恐怖"
        ],
        "country": '中国台湾',
        "year": "2024",
    },
    {
        "_id": "6830407c5b05254ad43ad998",
        "name": "终极对弈",
        "score": "7.3",
        "country": '韩国',
        "duration": "116",
        "hot": 0,
        "types": [
            "剧情", "传记"
        ],
        "year": "2025",
    },
    {
        "_id": "682f31885631163b8565d71f",
        "name": "大风杀",
        "score": "7.0",
        "country": '中国大陆',
        "duration": "131",
        "hot": 1,
        "types": [
            "悬疑",
            "犯罪",
            "剧情"
        ],
        "year": "2025",
    }
])
const typeData = ref([
    {
        "_id": "66383656659a454f4604aed3",
        "name": "喜剧"
    },
    {
        "_id": "66383669659a454f4604aed4",
        "name": "爱情"
    },
    {
        "_id": "6638366f659a454f4604aed5",
        "name": "动作"
    },
    {
        "_id": "66383673659a454f4604aed6",
        "name": "科幻"
    },
    {
        "_id": "6638369e659a454f4604aede",
        "name": "奇幻"
    },
    {
        "_id": "6638367b659a454f4604aed7",
        "name": "动画"
    },
    {
        "_id": "66383681659a454f4604aed8",
        "name": "悬疑"
    },
    {
        "_id": "66383689659a454f4604aed9",
        "name": "犯罪"
    },
    {
        "_id": "66383692659a454f4604aedb",
        "name": "冒险"
    },
    {
        "_id": "663836a1659a454f4604aedf",
        "name": "恐怖"
    },
    {
        "_id": "663836b0659a454f4604aee1",
        "name": "传记"
    },
    {
        "_id": "682f32c447bd398e5f05fd14",
        "name": "剧情"
    }
]);
const countryData = ref([
    {
        "_id": "682d9655fa09000092007cb3",
        "name": "中国大陆"
    },
    {
        "_id": "682f3a9047bd398e5f05fd1d",
        "name": "中国香港"
    },
    {
        "_id": "682fdada47bd398e5f05fd1f",
        "name": "中国台湾"
    },
    {
        "_id": "68303b6647bd398e5f05fd41",
        "name": "美国"
    },
    {
        "_id": "682da00efa09000092007cb5",
        "name": "法国"
    },
    {
        "_id": "6830403b47bd398e5f05fd42",
        "name": "韩国"
    },
    {
        "_id": "682d9d6efa09000092007cb4",
        "name": "日本"
    },

]);

// 要新增的电影对象
const addItem = reactive({
    types: []
});
// 要修改的电影对象
const updateItem = ref({
    types: []
});
// 所有的查询条件
const searchItem = ref({
    name: '',
    country: '',
    type: ''
})

const filterData = computed(() => {
    // return movieData.value.filter(item => item.name.includes(searchItem.value.name));
    // return movieData.value.filter(item => item.country == searchItem.value.country)
    // return movieData.value.filter(item => item.types.includes(searchItem.value.type));

    return movieData.value.filter(item => {
        const nameResult = item.name.includes(searchItem.value.name);
        // =右侧代码：判断搜索条件里country是否有值，如果有值，就进行筛选判断；如果没有值，就直接将筛选结果设置为true；
        const countryResult = searchItem.value.country ? (item.country == searchItem.value.country) : true;
        const typeResult = searchItem.value.type ? item.types.includes(searchItem.value.type) : true;

        return nameResult && countryResult && typeResult;
    })
})


function onAddMovie() {
    movieData.value.push({
        _id: Date.now(),
        ...addItem
    })
}
function onUpdateMovie() {
    movieData.value = movieData.value.map(item => {
        if (item._id == updateItem.value._id) {
            return updateItem.value;
        }
        return item;
    })
}


const onTest = () => {
    console.log(movieData.value);

}




</script>

<style scoped>
.form-item {
    display: flex;
}
</style>